<script>
    export default {
        props:{
            actived:{
                type: Boolean,
            },
			color: {
				type: String
			}
            // type:{
            //     type:String,
            //     default:'0'
            // }
        },
    }
</script>

<template>
	<div>
        <div class="wifi-symbol w-50 h-50 overflow-hidden" :class="{ active:  actived}">
            <div class="wifi-circle absolute round-full first w-5 h-5 bgc-white" :style="'border-color: '+color+' ;'"></div>
            <div class="wifi-circle absolute round-full second w-25 h-25" :style="'border-color: '+color+' ;'"></div>
            <div class="wifi-circle absolute round-full third w-40 h-40" :style="'border-color: '+color+' ;'"></div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.overflow-hidden{overflow: hidden;}
.absolute{position: absolute;}
.round-full{border-radius: 100%;}
.w-5{width: 5px}
.h-5{height: 5px;}
.bgc-white{background-color: #fff}
.w-25{width: 25px;}
.h-25{height: 25px;}
.w-40{width: 40px;}
.h-40{height: 40px;}
.w-50{width: 50px;}
.h-50{height: 50px;}
	.wifi-symbol {
	    box-sizing: border-box;
		$transform: rotate(135deg) translate3d(0, 0, 0) scale(.65);
	    transform: $transform;
	    -webkit-transform: $transform;
	    backface-visibility: hidden;
	    -webkit-backface-visibility: hidden;
	}
	
	.wifi-circle {
	    border: 4px solid rgb(32 207 27);
	}
	
	.first {
	    top: 45px;
	    left: 45px;
	}
	
	.second {
	    top: 35px;
	    left: 35px;
	}
	
	.third {
	    top: 25px;
	    left: 25px;
	}
	
	.active {
		opacity: 0.8;
		
		.second {
			animation: fadeInOut 1s infinite 0.2s;
			-webkit-animation: fadeInOut 1s infinite 0.2s;
		}
	
		.third {
			animation: fadeInOut 1s infinite 0.4s;
			-webkit-animation: fadeInOut 1s infinite 0.4s;
		}
	}
	
	@keyframes fadeInOut {
	    0%{opacity: 0}
	    100%{opacity: 1}
	}
</style>